.exhibition {
    justify-content: center;
    text-align: -webkit-center;
}

.exhibition ul li { list-style: none;}
.exhibition .header { 
  background-color: #124488; 
  height: 174px; 
  display: table; 
  width: 100%; 
  background-image: url("/assets/img/top/stripe.png");
}
.exhibition .header p{
  font: normal normal bold 30px/37px Noto Sans JP;
  letter-spacing: 3px;
  color: #FFFFFF;
  opacity: 1;
  transform: translateY(40%) translateX(0%);
  margin: 0;
  height: 100%;
}
.exhibition.main { display: flex; width: 90%;}
.exhibition.main .search { flex-basis: auto; }
.exhibition.main .search .user { 
  background-color: transparent; 
  margin-bottom: 32px;
}
.exhibition.main .search .category { background-color: transparent;  margin-bottom: 32px; text-align: left;}
.exhibition.main .search .service{ background-color: transparent;  margin-bottom: 32px;  text-align: left;}
.exhibition.main .search .item_company{ background-color: transparent;  text-align: left;}
.exhibition .search_title {
  font-size: 14px;
  height: 30px;
  /* UI Properties */
  text-align: left;
  letter-spacing: 1.05px;
  color: #333333;
  opacity: 1;
}

.input_radio { 
  display: grid; 
  grid-template-columns: 33% 33% 33%;
}
.exhibition input[type="search"]{
  width: 184px;

  height: 30px;
  /* UI Properties */
  border: 0.6666666865348816px solid #808080;
  opacity: 1;
}
.exhibition input[type="button"]{
  font-size: 16px;
  font-weight: 500;
  width: 184px;
  height: 43px;
  cursor     : pointer;         /* カーソル設定 */
  opacity: 1;
  letter-spacing: 1.05px;
  color: #FFFFFF;
  opacity: 1;
  border: 0.3333333432674408px solid #124488;
  background: #124488 0% 0% no-repeat padding-box;
  -webkit-appearance: none;
  border-radius: 0;
}
.exhibition input[type="button"]:hover{
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #124488;
  color: #124488;

}


.exhibition input[type="checkbox"] {
  display    : none;            /* チェックボックスは非表示 */
}
.exhibition input[type="checkbox"] + label div {
  height: 50px;
}



.exhibition input[type="checkbox"] + label{

  width: 55px;
  height: 55px;

  display    : flex;
  flex-direction: column;

}

/* --- チェックボックス直後のlabel --- */
.exhibition input[type="checkbox"] + label{
  background: #DCDCDC 0% 0% no-repeat padding-box; 
  opacity: 1;
  width: 57px;
  height: 27px;
  text-align: center;
  letter-spacing: 0.9px;
  color: #808080;
  display    : flex;
  justify-content: center;
  margin     : 5px;             /* labelの間隔  */
  cursor     : pointer;         /* カーソル設定 */
  font-size: 12px;
}
.exhibition label p {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: 12px;
}
.exhibition input[type="checkbox"] + label.ex1 {
  width: 55px;
  height: 56.7px;
  display    : flex;
  flex-direction: column;
  justify-content: flex-start;
}
.exhibition label.ex1 p { 
  font-size: 8px;
  text-align: center;
  cursor     : pointer;         /* カーソル設定 */
  letter-spacing: 0.4px;
  color: #808080;
}

.exhibition input[type="checkbox"] + label.ex2 {
  width: 184px !important; 
  height: 27px; 
  text-align: left !important; 
  padding-left: 20px;
}

 /* --- 選択されたチェックボックス直後のlabel --- */
.exhibition input[type="checkbox"]:checked + label {
  background: #B1E1E3 0% 0% no-repeat padding-box;
}
 
 /* --- 選択されたチェックボックス直後のlabel --- */
 .exhibition input[type="checkbox"]:not(:checked) + label:hover 
 .exhibition input[type="checkbox"]:not(:checked) + label:active 
{
  background: #B1E1E3 0% 0% no-repeat padding-box;
}


.exhibition.main .cards { flex-basis: 80%; }

.exhibition.main .cards .container { 
  display: grid;
  grid-template-columns: repeat(auto-fit, 13rem);
  grid-gap: 1rem;
  justify-content: center;
}
.cardbox {
  width: 204px;
  height: 320px;
  /* UI Properties */
  border: 0.5px solid #808080;
  opacity: 1;
  position: relative;
}
#shape {
  position: relative;
}

#shape:after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  border-left: 63px solid transparent;
  border-top: 63px solid #4ac; 
  content: "";
}
.cardbox span{
    top: 10px;
    left: 162px;
    width: 60px;
    height: 0px;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    text-align: center;
    font: normal normal bold 10px/12px Noto Sans JP;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    opacity: 1;
    position: absolute;
    z-index: 10;
}
.cardbox:hover {
filter: opacity(50%);
}
.cardbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cardbox .page-title {
  padding: 5px 20px 5px 20px;
  height: 70px;
  background: #2FAFB4 0% 0% no-repeat padding-box;
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.7px;
  color: #FFFFFF;
  opacity: 1;
  overflow: hidden;
}
.cardbox .page-explanation {
  height: 75px;
  padding: 5px 20px 5px 20px;
  text-align: left;
  font: normal normal normal 12px/16px Noto Sans JP;
  letter-spacing: 0.6px;
  color: #333333;
  opacity: 1;
  overflow: hidden;
}
 .page-good {
  padding: 5px 5px 0px 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  cursor     : pointer;         /* カーソル設定 */
}
.page-good div{
  margin-right: 3px;
}
.page-good div p {
  margin: 0px 0px 0px 0px;
  text-align: right;
  letter-spacing: 0.53px;
  color: #808080;
  opacity: 1;
  font-size: 10.67px;
}
.good-button {
  height: auto !important;
}
.article-button {
  height: auto !important;
}
.article-button[data-type="none"]{
  display: none;
}

.more {
  text-align: center;
  margin-top: 55px;
}
.exhibition_footer{ 
  margin-top: 60px;
  margin-bottom: 110px; 
}
    
.exhibition_footer .title{
  font-size: 30px;
  text-align: center;
  letter-spacing: 1.5px;
  color: #333333;
  opacity: 1;
  margin-bottom: 30px;
}
.exhibition_footer .slide-items {
  width: 95%;
  margin: auto;
}

.exhibition_footer  .slick-prev:before,
.exhibition_footer  .slick-next:before {
  color: black;
}
.exhibition_footer q.slick-dots li button:before {
  font-size: 18px;
  top: 6px;
}

.empty-row{height:32px;}
/* --- sub-results sub-exhibition --- */
.results-num {
  text-align: left;
  font: normal normal medium 21px/26px Noto Sans JP;
  letter-spacing: 2.1px;
  color: #333333;
  opacity: 1;
  font-size: 21px;
  text-align: left;
  width: 95%;

}
.results-disp-num {
  height: 30px;
  /* UI Properties */
  background: #EFF6FB 0% 0% no-repeat padding-box;
  opacity: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin-bottom: 15px;
  padding: 7px;
}
.results-disp-num p {
  text-align: left;
  font: normal normal normal 12px/26px Noto Sans JP;
  letter-spacing: 1.2px;
  color: #333333;
  opacity: 1;
  font-size: 12px;
}
.results-disp-num p.sort {
  font: normal normal bold 12px/26px Noto Sans JP;
  letter-spacing: 1.2px;
  color: #124488;
  opacity: 1;
 }
 .slick-prev,
 .slick-next {
   width: auto;
   height: auto;
   border-top: 17px solid #fff;
   border-bottom: 17px solid #fff;
 }
 
 .slick-prev::before,
 .slick-next::before {
   content: none;
 }
 
 .slick-prev {
   border-right: 14px solid #124488;
   border-left: 0;
 }
 
 .slick-next {
  border-right: 0;
  border-left: 14px solid #124488;
}
@media(max-width: 768px) {
    .exhibition.main { width: 100%;}
    #search_pc { display: none;}
    #search_sp { 
        margin-top: 15vw;
        height: 110vw;
        overflow-y: scroll;
    }
    .exhibition.main .cards { flex-basis: 100%; }
    .cardbox {
        width: 100%;
        height: 310px;
    }
    .cardbox .page-title {
      padding: 5px 5px 5px 5px;
      height: 75px;
    }
    .cardbox .page-explanation {
      padding: 5px 5px 5px 5px;
    }
    .slide {
      width: 168px !important;

    }
    .exhibition.main .cards .container { 
        grid-template-columns: repeat(auto-fit, 11rem);
        grid-gap: 0.5rem;
    }
    .cardbox span {
        left: 130px;
        width: 40%;
    }

    .more,
    .item_company {
      width: 89.5%;
    }


    .input_radio {
        display: grid;
        grid-template-columns: 20% 20% 20% 20% 20%;
        justify-items: center;
        align-items: center;
        width: 90%;
    }

    .exhibition .search_title {
        width: 90%;
        text-align: left;
        margin-top: 36px;
        font-size: 16px;

    }
    .exhibition input[type="checkbox"] + label {
        width: 61px;
        height: 40px;
    }
    .exhibition input[type="checkbox"] + label p {
        font-size: 14px;
    }
    .exhibition input[type="checkbox"] + label.ex2 {
        width: 90% !important;
        height: 53px;
        text-align: center !important;
        padding-left: 0px;
        font-size: 14px;
    }

    .exhibition input[type="search"] {
        width: 90%;
        height: 53px;
    }

    .exhibition_footer .slide-items {
        width: 91%;
    }
    .exhibition_footer .title {
        font-size: 20px;
    }
    .slick-prev,
    .slick-next {
      display:none !important;
    }

    .exhibition input[type="button"] {
      width: 100%;
      height: 57px;
    }
}